<template>
  <Div>
    <el-skeleton style="width: 100%; height: 100%" :loading="loading" animated>
      <template slot="template">
        <div
          style="
            display: flex;
            align-items: center;
            justify-items: space-between;
            margin-top: 10px;
            height: 100%;
            width: 100%;
          "
        >
          <Div style="width: 50%; padding: 10px">
            <el-skeleton-item
              variant="text"
              style="margin-right: 16px; height: 45vh"
            />
            <el-skeleton-item
              variant="text"
              style="margin-right: 16px; height: 45vh"
            />
          </Div>
          <div style="width: 50%; padding: 10px">
            <el-skeleton-item
              variant="text"
              style="width: 100%; height: 30vh"
            />
            <el-skeleton-item
              variant="text"
              style="width: 100%; height: 30vh"
            />
            <el-skeleton-item
              variant="text"
              style="width: 100%; height: 30vh"
            />
          </div>
        </div>
      </template>
      <template>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-card class="box-card" shadow="hover">
              <div class="user">
                <el-avatar
                  :size="100"
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                ></el-avatar>
                <div class="user-info">
                  <p class="name">Admin</p>
                  <p class="asses">超级管理</p>
                </div>
              </div>
              <el-divider></el-divider>
              <div class="usertext">
                <p>上次登录时间:<span>2022-10-09</span></p>
                <p>上次登录地点:<span>武汉</span></p>
              </div>
            </el-card>
            <el-card class="table" shadow="hover">
              <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  v-for="(value, key) in tableLabel"
                  :prop="key"
                  :label="value"
                  :key="key"
                ></el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="16" class="bg-purple" :gutter="10">
            <el-col
              :span="8"
              v-for="item in countData"
              :key="item.name"
              class="data"
            >
              <div class="num">
                <el-card
                  class="box-card"
                  shadow="hover"
                  :body-style="{ display: 'flex', padding: '0' }"
                >
                  <i
                    class="icon"
                    :class="`el-icon-${item.icon}`"
                    :style="{ background: item.color }"
                  ></i>
                  <div class="detail">
                    <p class="price">￥{{ item.value }}</p>
                    <p class="desc">{{ item.name }}</p>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-col>
          <el-col :span="16" class="data">
            <el-card class="box-card countEcharts" shadow="hover">
              <div ref="echarts1" style="height: 300%; width: 105%"></div>
            </el-card>
          </el-col>
          <el-col :span="8" class="data">
            <el-card class="box-card" shadow="hover">
              <div ref="echarts2" style="height: 300%; width: 100%"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card" shadow="hover">
              <div ref="echarts3" style="height: 300%; width: 100%"></div>
            </el-card>
          </el-col>
        </el-row>
      </template>
    </el-skeleton>
  </Div>
</template>

<script>
import { getData } from "../api";
import * as echarts from "echarts";
export default {
  name: "Home",
  data() {
    return {
      loading: true,
      tableData: [],
      tableLabel: {
        name: "名称",
        monthBuy: "本月购买",
        todayBuy: "今日购买",
        totalBuy: "总购买",
      },
      countData: [
        {
          name: "今日支付订单",
          value: "1,234",
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日收藏订单",
          value: "1,234",
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日未支付订单",
          value: 210,
          icon: "s-goods",
          color: "#5ab1ef",
        },
        {
          name: "本月支付订单",
          value: "1,234",
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "本月收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "本月未支付订单",
          value: "1,234",
          icon: "s-goods",
          color: "#5ab1ef",
        },
      ],
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      } else if (rowIndex % 2 != 0) {
        return "success-row";
      }
      return "";
    },
  },
  mounted() {
    setTimeout(() => {
      getData().then(({ data }) => {
        //左侧数据-----------------
        const { tableData } = data.data;
        this.tableData = tableData;
        //-----------------------------
        //右侧折线图数据一操作,初始化dom，echats实例
        const echarts1 = echarts.init(this.$refs.echarts1);
        var echarts1Option = {};
        const { orderData, userData, videoData } = data.data;

        const xAxis = Object.keys(orderData.data[0]);
        const xAxisData = { data: xAxis };

        echarts1Option.xAxis = xAxisData;
        echarts1Option.yAxis = {};
        echarts1Option.legend = xAxisData;
        echarts1Option.series = [];
        echarts1Option.tooltip = {
          trigger: "axis",
        };

        xAxis.forEach((key) => {
          echarts1Option.series.push({
            name: key,
            data: orderData.data.map((item) => item[key]),
            type: "line",
            smooth: true,
          });
        });
        echarts1.setOption(echarts1Option);
        //右侧柱状图数据二操作,初始化dom，echats实例
        const echarts2 = echarts.init(this.$refs.echarts2);

        const echarts2Option = {
          // 提示框
          tooltip: {
            trigger: "axis",
          },
          // 图例
          legend: {
            icon: "circle",
            left: "center",
            top: 0,
            data: ["新增用户", "活跃用户"],
          },
          grid: {
            left: "3%",
            right: "3%",
            bottom: "3%",
            containLabel: true,
          },
          //工具栏
          xAxis: {
            // type: 'category',
            // boundaryGap: false,
            data: userData.map((item) => item.data),
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "新增用户",
              data: userData.map((item) => item.new),
              type: "bar",
              stack: "x",
              barWidth: "25%",
            },
            {
              name: "活跃用户",
              data: userData.map((item) => item.active),
              type: "bar",
              stack: "x",
            },
          ],
        };

        echarts2.setOption(echarts2Option);
        //右侧饼状图三操作,初始化dom，echats实例
        const echarts3 = echarts.init(this.$refs.echarts3);
        var nameData = videoData.map((item) => item.name);
        const echarts3Option = {
          animation: true,
          legend: {
            width: "100%",
            left: "center",
            textStyle: {
              color: "#9B9B9B",
              fontSize: 16,
            },
            icon: "circle",
            right: "0",
            bottom: "0",
            top: "75%",
            itemGap: 20,
            data: nameData,
          },
          series: [
            {
              type: "pie",
              center: ["50%", "35%"],
              radius: ["30%", "45%"],
              color: [
                "#3A86D9",
                "#DD0C75",
                "#3A00D9",
                "#D99C75",
                "#3A8909",
                "#DD7875",
              ],
              startAngle: 135,
              labelLine: {
                normal: {
                  length: 25,
                },
              },
              label: {
                normal: {
                  // formatter: "{c}\n{d}%",
                  formatter: "\n{d}%",
                  backgroundColor: "rgba(255, 147, 38, 0)",
                  borderColor: "transparent",
                  borderRadius: 4,
                  textStyle: {
                    color: "#4a4a4a",
                    fontSize: 16,
                  },
                },
              },
              data: videoData,
            },
          ],
        };

        echarts3.setOption(echarts3Option);
      });
      this.loading = false;
    }, 1000);
  },
};
</script>

<style lang="less">
.countEcharts {
  .el-card__body {
    padding: 0 !important;
  }
}
.data {
  margin-bottom: 20px;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
<style lang="less" scoped>
.el-card {
  cursor: pointer;
}
.usertext {
  font-size: 0.8rem;
  color: slategrey;
  span {
    margin-left: 40px;
    color: black;
  }
}
.user {
  display: flex;
  align-items: center;
  .el-avatar {
    margin-right: 40px;
  }
  .user-info {
    .name {
      font-size: 1.5rem;
    }
    .asses {
      font-size: 0.8rem;
      color: slategrey;
    }
  }
}
.table {
  margin-top: 20px;
}
.num {
  .icon {
    width: 80px;
    height: 80px;
    font-size: 30px;
    text-align: center;
    line-height: 80px;
    color: white;
  }
  .detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px;
    p {
      margin: 0;
    }
    .price {
      font-size: 30px;
      margin-bottom: 10px;
      font-weight: bold;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .desc {
      color: #999;
    }
  }
}
.bg-purple {
  padding: 0 !important;
}
</style>